<template>
  <div class="page-content">
    <!-- 工具栏区域 -->
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <!-- 条件查询区域 -->
      <div slot="top">暂无查询方式</div>
      <!-- 左侧按钮 -->
    </table-bar>
    <el-table :data="derviceTableData" style="width: 100%" class="table">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="formClass">
            <el-row>
              <el-col span="8">
                <el-form-item label="类型编号：">
                  <span>{{ props.row.class_num }}</span> </el-form-item
                ><br />
                <el-form-item label="设备编号：">
                  <span>{{ props.row.device_class_id }}</span> </el-form-item
                ><br />
                <el-form-item label="房间编号：">
                  <span>{{ props.row.room_id }}</span>
                </el-form-item>
              </el-col>
              <el-col span="8">
                <el-form-item label="名称：">
                  <span>{{ props.row.name }}</span> </el-form-item
                ><br />
                <el-form-item label="类型名称：">
                  <span>{{ props.row.class_name }}</span> </el-form-item
                ><br />
                <el-form-item label="系统名称：">
                  <span>{{ props.row.sys_name }}</span>
                </el-form-item>
              </el-col>
              <el-col span="8">
                <el-form-item label="数量：">
                  <span>{{ props.row.count }}</span> </el-form-item
                ><br />
                <el-form-item label="指标参数：">
                  <span>{{ props.row.parameter }}</span> </el-form-item
                ><br />
                <el-form-item label="检查时间：">
                  <span>{{ props.row.check_time }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="class_num"
        label="类型编号"
        v-if="columns[0].show"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="class_name"
        label="类型名"
        v-if="columns[1].show"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="quantity"
        label="数量"
        v-if="columns[2].show"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="parameter"
        label="指标参数"
        v-if="columns[3].show"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="check_time"
        label="检查时间"
        v-if="columns[4].show"
        width="180"
      ></el-table-column>
      <el-table-column label="操作" v-if="columns[5].show">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-search"
            @click="checkoutDatas(scope.row)"
            >查看历史数据</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      :title="title"
      :visible.sync="derviceDrawer"
      size="100%"
      :direction="direction"
    >
      <el-card class="parameterCard">
        <span class="currentParameterText">当前参数：</span>
        <span class="currentParameterBox">{{ currentParameter }}</span>
        <span class="currentParameterTime">{{ currentTime }}</span>
      </el-card>
      <el-card>
        <el-container>
          <el-header class="echarHeader">
            <span class="btn" id="day" @click="day()">天</span>
            <span class="btn" id="week" @click="week()">周</span>
            <span class="btn" id="month" @click="month()">月</span>
            <span class="btn" id="year" @click="year()">年</span>
            <div class="afterBtn">环境监测历史数据</div>
          </el-header>
          <el-main>
            <EcharsDay
              :currentDerviceInfo="currentDerviceInfo"
              :parameterUnit="parameterUnit"
              :EcharsData="EcharsData"
              :xTimes="xTimes"
              :parameterUnitKey="parameterUnitKey"
            />
          </el-main>
        </el-container>
      </el-card>
    </el-drawer>
  </div>
</template>

<script>
import EcharsDay from "@/components/Dervice/echarsDay.vue";
import {
  getDerviceList,

  getDerviceInfo,

  getDerviceData,
  getCurrentParameter,
} from "@/api/Dervice/Device";
// import DerviceManage from "@/components/Dervice/derviceManage.vue";

export default {
  name: "DerviceManage",
  meta: {
    title: "设备管理",
  },
  components: {
    EcharsDay,
  },
  data() {
    return {
      columns: [
        { name: "类型编号", show: true },
        { name: "类型名", show: true },
        { name: "数量", show: true },
        { name: "指标参数", show: true },
        { name: "检查时间", show: true },
        { name: "操作", show: true },
      ], // 表格头
      derviceDrawer: false, // 抽屉打开or关闭
      direction: "btt", // 抽屉打开方向
      token: "", // 当前token
      picUrl: "", // 图片地址
      title: "", // 图表名
      derviceTableData: [], // 表格的设备数据
      currentDerviceInfo: {}, // 当前设备信息
      currentParameter: "", // 当前参数值
      parameterUnitKey: "", // 当前参数名
      parameterUnit: "", // 当前参数单位
      currentTime: "", // 当前参数时间
      currentParameterUnits: {
        co2: "PPM",
        illumination: "LUX",
        pm25: "ug/m³",
        pm10: "ug/m³",
        temperature: "℃",
        humidity: "%",
      },
      tempId: 0,
      flag: 0, // 日（1）、周（2）、月（3）、年（4）的筛选数
      timeType: '',
      nTime: 0, // 现在的时间戳
      tTime: 0, // 起始时间的时间戳
      xTimes: [], // 图表x轴的时间数组

      time1: 0,
      time2: 0,
      time3: 0,
      time4: 0,
      time5: 0,

      nYear: 0,
      nMonth: 0,
      nDay: 0,
      nHour: 0,
      nMinute: 0,
      nSecond: 0,
      startTime: "",
      stopTime: "",
      timeInterval: "",
      EcharsData: [],
    };
  },
  created() {
    getDerviceList().then((res) => {
      if (res.data.status === 200) {
        this.derviceTableData = res.data.data;
      } else {
        return this.$message.error("获取用户权限失败！");
      }
    });
  },
  methods: {
    checkoutDatas(derviceInfo) {
      this.tempId = derviceInfo.id;
      this.title = derviceInfo.class_name + " —— " + derviceInfo.name;
      this.getDerviceInfo(derviceInfo.id);
      this.getCurrentParameter(derviceInfo.id);
      this.derviceDrawer = true;
      console.log(this.tempId, 'id');
    },
    // columns改变
    changeColumn(columns) {
      this.columns = columns;
      this.$refs.flowListRef.doLayout();
    },
    // 获取对应id传感器的数据
    async getDerviceInfo(id) {
      this.day();

      this.derviceDrawer = true;
      this.getCurrentParameter(id);
      console.log('h1h1h1h1');
      console.log(id);
      console.log(this.parameterUnitKey);
      console.log(this.timeType);
      console.log('h1h1h1h1');
      const { data: res } = await getDerviceInfo(id, this.parameterUnitKey, this.timeType);
      this.currentDerviceInfo = res.data;
      console.log(res, 'reshhh');
    },
    // 获取当前参数和时间
    async getCurrentParameter(id) {
      const { data: res } = await getCurrentParameter(id);
      const resTempData = res.data;
      console.log(res, "结果");
      for (var k in resTempData) {
        // this.currentParameter = resTempData[k]
        this.parameterUnitKey = k;
        break;
      }
      console.log(resTempData, 555);
      for (var y in this.currentParameterUnits) {
        if (y === this.parameterUnitKey) {
          this.parameterUnit = this.currentParameterUnits[y];
          break;
        }
      }
      this.currentParameter =
        resTempData[this.parameterUnitKey].number + this.parameterUnit;
      this.currentTime = resTempData[this.parameterUnitKey].time;
      let unitKey = this.parameterUnitKey;
      return unitKey;
    },
    // 获取指定时间
    getTime(time) {
      var currentTime = new Date(time);
      this.nHour = currentTime.getHours();
      this.nHour = this.nHour < 10 ? "0" + this.nHour : this.nHour;
      this.nMinute = currentTime.getMinutes();
      this.nMinute = this.nMinute < 10 ? "0" + this.nMinute : this.nMinute;
      this.nSecond = currentTime.getSeconds();
      this.nSecond = this.nSecond < 10 ? "0" + this.nSecond : this.nSecond;
      this.nYear = currentTime.getFullYear();
      this.nMonth = currentTime.getMonth() + 1;
      this.nMonth = this.nMonth < 10 ? "0" + this.nMonth : this.nMonth;
      this.nDay = currentTime.getDate();
      this.nDay = this.nDay < 10 ? "0" + this.nDay : this.nDay;
      var rtnTime =
        this.nYear +
        "-" +
        this.nMonth +
        "-" +
        this.nDay +
        "T" +
        this.nHour +
        ":" +
        this.nMinute +
        ":" +
        this.nSecond;
      return rtnTime;
    },
    // 获取起始时间和结束时间
    getStartTime(flag) {
      this.xTimes = [];
      this.nTime = Date.now();
      if (flag === 1) {
        // 日
        this.tTime = this.nTime - 86400000;
        this.time1 = this.nTime - 13200000;
        this.time2 = this.nTime - 26400000;
        this.time3 = this.nTime - 39600000;
        this.time4 = this.nTime - 52800000;
        this.time5 = this.nTime - 66000000;
      } else if (flag === 2) {
        // 周
        this.tTime = this.nTime - 604800000;
        this.time1 = this.nTime - 86400000;
        this.time2 = this.nTime - 172800000;
        this.time3 = this.nTime - 259200000;
        this.time4 = this.nTime - 345600000;
        this.time5 = this.nTime - 518400000;
      } else if (flag === 3) {
        // 月
        this.tTime = this.nTime - 2592000000;
        this.time1 = this.nTime - 345600000;
        this.time2 = this.nTime - 691200000;
        this.time3 = this.nTime - 1036800000;
        this.time4 = this.nTime - 1382400000;
        this.time5 = this.nTime - 1728000000;
      } else {
        // 年
        this.tTime = this.nTime - 31104000000;
        this.time1 = this.nTime - 5184000000;
        this.time2 = this.nTime - 10368000000;
        this.time3 = this.nTime - 15552000000;
        this.time4 = this.nTime - 20736000000;
        this.time5 = this.nTime - 25920000000;
      }
      this.startTime = this.getTime(this.tTime);
      this.stopTime = this.getTime(this.nTime);
      this.xTimes.push(this.startTime);
      this.xTimes.push(this.getTime(this.time5));
      this.xTimes.push(this.getTime(this.time4));
      this.xTimes.push(this.getTime(this.time3));
      this.xTimes.push(this.getTime(this.time2));
      this.xTimes.push(this.getTime(this.time1));
      this.xTimes.push(this.stopTime);
    },
    // 获取设备时间段参数timeInterval
    getTimeInterval() {
      if (this.flag === 1) {
        this.timeInterval = "20m";
      } else if (this.flag === 2) {
        this.timeInterval = "1h";
      } else if (this.flag === 3) {
        this.timeInterval = "8h";
      } else if (this.flag === 4) {
        this.timeInterval = "1d";
      }
    },
    // 清空时间默认值
    clearCurrentTime() {
      this.nTime = 0;
      this.tTime = 0;
      this.nYear = 0;
      this.nMonth = 0;
      this.nDay = 0;
      this.nHour = 0;
      this.nMinute = 0;
      this.nSecond = 0;
      this.xTimes = [];
      this.startTime = "";
      this.stopTime = "";
    },
    // 获取设备数据信息
    getDerviceData(id, flag) {
      let unitKey = "111";
      this.clearCurrentTime();
      this.getStartTime(flag);
      this.getTimeInterval();
      this.getCurrentParameter(id).then(async(value) => {
        unitKey = value;
        this.parameterUnitKey = unitKey;
        const { data: res } = await getDerviceData(
          id,
          this.startTime,
          this.stopTime,
          this.timeInterval,
          unitKey
        );
        console.log(res.data, "EchartsData");
        this.EcharsData = res.data;
      });
    },
    // 白底选项
    turnWhite(ch) {
      // var BTNDiv = document.querySelector('.echarHeader')
      this.$nextTick(() => {
        var BTNS = document
          .querySelector(".echarHeader")
          .querySelectorAll("span");
        var BTN = document.querySelector(ch);
        for (var i = 0; i < 4; i++) {
          BTNS[i].className = "btn";
        }
        BTN.className = "btnClick";
      });
      // var BTNS = document.querySelector('.echarHeader').querySelectorAll('span')
    },
    // “天”图表
    day() {
      this.turnWhite("#day");
      console.log("天");
      this.flag = 1;
      this.timeType = '日';
      this.getDerviceData(this.tempId, this.flag);
    },
    // “周”图表
    week() {
      this.turnWhite("#week");
      console.log("周");
      this.flag = 2;
      this.timeType = '周';
      this.getDerviceData(this.tempId, this.flag);
    },
    // “月”图表
    month() {
      this.turnWhite("#month");
      console.log("月");
      this.flag = 3;
      this.timeType = '月';
      this.getDerviceData(this.tempId, this.flag);
    },
    // “年”图表
    year() {
      this.turnWhite("#year");
      console.log("年");
      this.flag = 4;
      this.timeType = '年';
      this.getDerviceData(this.tempId, this.flag);
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  padding-top: 14px;
  font-size: 14px;
  text-align: center !important;
  color: rgb(102, 102, 102);
}

/deep/ .el-table th {
  z-index: 99;
  text-align: center;
  line-height: 29px;
  color: rgb(102, 102, 102);
  background-color: rgb(248, 248, 248);
}

/deep/ .el-table td {
  z-index: 99;
  text-align: center;
  line-height: 29px;
}

.formClass {
  text-align: left;
}

/deep/ .el-main {
  padding: 0;
  margin: 0;
  height: 500px;
}

.btn,
.afterBtn {
  margin: 0 -2px;
  display: inline-block;
  height: 45px;
  width: 270px;
  line-height: 45px;
  font-size: 16px;
  text-align: center;
  color: white;
  background-color: rgb(77, 78, 78);
}

.btn {
  cursor: pointer;
}

.btnClick {
  margin: 0 -2px;
  display: inline-block;
  height: 45px;
  width: 270px;
  line-height: 45px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  color: black;
  background-color: rgb(255, 255, 255);
}

.afterBtn {
  color: rgb(195, 195, 195);
}

.echarHeader {
  margin: 0 auto;
}

/deep/ .el-drawer__header {
  padding-left: 50px;
  font-size: 26px;
  font-weight: 700;
}

.parameterCard {
  height: 60px;
}

.currentParameterText {
  display: flex;
  justify-content: flex-end;
  margin: -2px 330px 0 0;
  font-size: 18px;
}

.currentParameterBox {
  display: flex;
  justify-content: flex-end;
  margin: -22px 250px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: rgb(35, 183, 255);
}

.currentParameterTime {
  display: flex;
  justify-content: flex-end;
  margin: -20px 50px 0 0;
  font-size: 16px;
  color: gray;
}
</style>